<template>
  <div class="adress">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      tel-maxlength="11"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      :address-info="addressinfo"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { AddressEdit } from "vant";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import { addAddressAPI, delAddressAPI } from "../../api/address";
Vue.use(AddressEdit);
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      addressinfo: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getAddress() {
      console.log(this.$route.params); //拿到上个页面传来的数据
      // let obj = this.$route.params;
      // 根据aid获取本条地址的数据
      // const result = await getOneAddressAPI({ id: this.$route.params });
      // console.log(result);
      // this.addressInfo = {
      //   id: obj.aid,
      //   name: obj.name,
      //   tel: obj.tel,
      //   addressDetail: obj.addressDetail,
      //   isDefault: obj.isDefault,
      //   postalCode: obj.postalCode,
      //   province: obj.province,
      //   city: obj.city,
      //   county: obj.county,
      // };
      // console.log(this.addressInfo);
    },
    //保存数据到vuex中
    async onSave(content) {
      console.log(111, content); //拿到的数据，是一个对象
      const { province, city, county, addressDetail } = content; //把省、市、区结构出来
      const regions = province + city + county; //收货人的省市区
      const address = province + city + county + addressDetail; //收货人的地址汇总信息
      content.regions = regions;
      content.address = address;
      //保存之前要判断存不存在默认收货地址，只能有一个默认地址 isDefault == true
      let flag = this.$store.state.receiver.filter((item) => {
        return item.isDefault;
      });
      console.log(flag); //如果flag已经有值，就不能再设置为isDefault 默认地址
      //要存入接口的数据
      const addressInfo = {
        receiver: content.name,
        mobile: content.tel,
        regions: content.regions,
        address: content.address,
        isDefault: content.isDefault,
        postalCode: content.postalCode,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
      };
      if (flag.length == 0) {
        const result = await addAddressAPI(addressInfo);
        console.log(222, result); //收货地址保存成功
      } else {
        if (content.isDefault == false) {
          const result = await addAddressAPI(addressInfo);
          console.log(222, result);
        } else {
          Toast("默认地址已经存在！");
        }
      }
    },

    async onDelete() {
      console.log(this.$route.params.aid);
      await delAddressAPI(this.$route.params.aid);
      Toast("delete");
      this.$router.push({
        path: "/addressList",
      });
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  created() {
    // console.log(this.$store.state.receiver);
    this.getAddress();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
